<template>
	<div>
		<div class="mineNav">
			<MineNav :navTitle="navTitle" />
		</div>
		<router-link to="mineIndex">
			<img class="leftArrow" src="../../../assets/images/dynamicState/37/f-1.png" alt="" />
		</router-link>
		
        <div class='renZhengBody'>
        	<input type="text" placeholder="请输入您的真实姓名" class="realName"/>
        	<p class="required1">必填</p>
        	<input type="text" placeholder="请输入您的联系方式" class="realChat"/>
        	<p class="required2">必填</p>
        	<div class='uploadImg'>
        		<p>请上传如左图所示的图片</p>
        		<img src="../../../assets/images/mine/49/example.png" alt="" class="firstLoad"/>
        		<img src="../../../assets/images/mine/49/s-1.png" alt="" class="secondLoad"/>
        	    <b class="lineB"></b>
        	</div>
        	<div class="rolesDiv">
        		<p class='rolers'>请填写您所参演过的栏目/剧名称及所饰演的角色</p>
	        	<p class='requireRole'>至少添加一项，也可以添加多项</p>
	        	<div class="reduce" v-if="inputShow" v-for="(item,index) in rolerData">
	        		<p class='lanMu'>{{item.lanMuVal}}</p>
	        		<p class="roleInput">{{item.roleVal}}</p>
	        		<img src="../../../assets/images/mine/49/j-1.png" alt="" @click="reduceMsy(index)"/>
	        	</div>
	        	
	        	<div class="addInput">
	        		<input type="text" placeholder="栏目/剧名称" class='lanMu' v-model="lanMuVal"/>
	        		<input type="text" placeholder="饰演角色" class="roleInput" v-model="roleVal"/>
	        	</div>
	        	
	        	<div class="addImgNew" @click="addMsy">
	        		<img src="../../../assets/images/mine/49/t-1.png" alt="" />
	        		<p>添加一条新的</p>
	        	</div>
        	</div>
        	
        	<p class="agree">点击提交表示同意<a href="javaScript:;">保密协议</a></p>
        	<router-link to="mineIndex">
        		<div class="submitAgree"><p>提交</p></div>
        	</router-link>
        	
        </div>  
	</div>
</template>

<script>
	import MineNav from "../public/mineNav"
	export default {
		components:{
			MineNav
		},
		data(){
			return{
				navTitle:"明星认证",
				tzUrl:"mineIndex",
				rolerData:[],
				inputShow:true,
				lanMuVal:"",
				roleVal:""
			}
		},
		created(){
			if(this.rolerData.length == 0){
				this.inputShow = false;
			}else{
				this.inputShow = false;
			}
		},
		methods:{
			reduceMsy(index){
				this.rolerData.splice(index,index+1);
				if(this.rolerData.length == 0){
					this.inputShow = false;
				}	
			},
			addMsy(){
				var roleObj = {
					roleVal:this.roleVal,
					lanMuVal:this.lanMuVal
				}
				this.rolerData.push(roleObj);
				if(this.rolerData.length){
					this.inputShow = true
				}
				this.roleVal = '',
				this.lanMuVal = ''
			}
		}
	}
</script>

<style scoped lang="less">
	@current: 100rem;
	.mineNav {
		height: 88/@current;
	}
	.leftArrow {
		position: fixed;
		top: 26/@current;
		left: 40/@current;
		z-index: 333;
		width: 22/@current;
	}
	.renZhengBody{
		width:100%;
		position:relative;
		overflow: hidden;
		.realName{
			width: 577/@current;
			height: 80/@current;
			padding-left: 15/@current;
			margin:0 20/@current;
			font-size:28/@current;
			color:#a9a2b4;
			border:1/@current solid #a9a2b4;
			border-radius: 12/@current;
			position:absolute;
			top:20/@current;
		}
		.realChat{
			position:absolute;
			top:120/@current;
			width: 577/@current;
			height: 80/@current;
			padding-left: 15/@current;
			margin:0 20/@current;
			font-size:28/@current;
			color:#a9a2b4;
			border:1/@current solid #a9a2b4;
			border-radius: 12/@current;
			
		}
		.required1,.required2{
			color:#A54BE8;
			font-size:26/@current;
		}
		.required1{
			position:absolute;
			top:40/@current;
			right:46/@current;
		}
		.required2{
			position:absolute;
			top:140/@current;
			right:46/@current;
		}
		.uploadImg{
			width:600/@current;
			margin-top:220/@current;
			margin-left:20/@current;
			height:360/@current;
			background:#e5e0ed;
			border-radius: 10/@current;
			p{
				color:#313131;
				padding-top:20/@current;
				font-size:28/@current;
				padding-left:20/@current;
				
			}
			img{
				width:170/@current;
				height:245/@current;
				margin-top:26/@current;
			}
			.firstLoad{
				margin-left:62/@current;
			}
			.secondLoad{
				margin-left:114/@current;
			}
		}
		.lineB{
		   display: inline-block;
			width:100%;
			height:1/@current;
			background:#d7d2e0;
			transform: translateY(-70/@current);
			
		}
		.rolesDiv{
			padding-top:24/@current;
			width:600/@current;
			margin-left:20/@current;
			.rolers{
		 	    color:#313131;
		 	    font-size:26/@current;
		 	    padding-top:22/@current;
		 	    
		    }
		    .requireRole{
		    	color:#A54BE8;
		 	    font-size:26/@current;
		    }
		    .reduce{
		    	position:relative;
		    	/*top:20/@current;*/
		    	height:80/@current;
		    	overflow: hidden;
		    	margin-top:20/@current;
		    	.lanMu{
			    	float:left;
			    	width:310/@current;
					height: 80/@current;
					line-height: 80/@current;
					padding:0 15/@current;
					font-size:28/@current;
					color:#a9a2b4;
					border:1/@current solid #a9a2b4;
					border-radius: 12/@current;
			    }
			    .roleInput{
			    	margin-left:10/@current;
			    	float:left;
			    	width:150/@current;
					height: 80/@current;
					line-height: 80/@current;
					padding-left: 15/@current;
					font-size:28/@current;
					color:#a9a2b4;
					border:1/@current solid #a9a2b4;
					border-radius: 12/@current;
			    }
			    img{
			    	width:46/@current;
			    	height:46/@current;
			    	position:absolute;
			    	right:16/@current;
			    	top:17/@current;
			    }
		    }
		    .addInput{
		    	overflow: hidden;
		    	margin-top:20/@current;
		    	.lanMu{
			    	float:left;
			    	width:350/@current;
					height: 80/@current;
					padding:0 15/@current;
					font-size:28/@current;
					color:#a9a2b4;
					border:1/@current solid #a9a2b4;
					border-radius: 12/@current;
			    }
			    .roleInput{
			    	margin-left:10/@current;
			    	float:left;
			    	width:170/@current;
					height: 80/@current;
					padding-left: 15/@current;
					font-size:28/@current;
					color:#a9a2b4;
					border:1/@current solid #a9a2b4;
					border-radius: 12/@current;
			    }
		    }
		    
		}
		.addImgNew{
			width:600/@current;
			position:relative;
			height:80/@current;
			img{
				width:100%;
				height:80/@current;
			}
			P{
				font-size:28/@current;
				color:#a9a2b4;
				position:absolute;
				top:46/@current;
				left:230/@current;
				
			}
		}
		.agree{
			color:#A9A2B4;
			font-size:28/@current;
			margin-top:160/@current;
			text-align: center;
			a{
				color:#A54BE8;
				text-decoration: underline;
			}
		}
		.submitAgree{
			width:600/@current;
			text-align: center;
			height:88/@current;
			background:#A54BE8;
			margin-left:20/@current;
			margin-top:66/@current;
			margin-bottom:30/@current;
			border-radius: 10/@current;
			P{
				font-size:36/@current;
				height:88/@current;
				line-height:88/@current;
				color:white;
			}
		}
	}
	
</style>